<template>
  <div>
    <!--   搜索 searchBar-->
    <div
        class="flex"
        style="
        justify-content: space-between;
        position: relative;
        align-items: center;
        flex-wrap: wrap;
      "
    >
      <div class="flex" style="margin-right: 20px">
        <div class="search">
          店长姓名：
          <el-input
              placeholder="请输入"
              style="width: 200px"
              size="small"
              clearable
              prefix-icon="el-icon-search"
              v-model="params.userName"
          >
          </el-input>
        </div>

        <div class="search">
          店长电话：
          <el-input
              placeholder="请输入"
              style="width: 200px"
              size="small"
              clearable
              prefix-icon="el-icon-search"
              v-model="params.phoneNum"
          >
          </el-input>
        </div>
        <div class="search">品牌：
          <el-select size="small" v-model="params.brandPartyId" filterable>
            <el-option v-for="item in brandList" :value="item.id" :label="item.brandPartyName"
                       :key="item.id"></el-option>
          </el-select>
        </div>
        <div class="search">
          <el-button
              size="small"
              type="primary"
              @click="result"
              icon="el-icon-refresh-right"
          >重置
          </el-button>
        </div>

        <div class="search">
          <el-button
              size="small"
              icon="el-icon-search"
              type="primary"
              @click="_search"
          >查询
          </el-button>
        </div>
      </div>
    </div>
    <!--    新增按钮 -->
    <div>
      <el-button
          type="primary"
          size="small"
          style="margin-bottom: 10px"
          icon="el-icon-plus"
          @click="addStoreManager"
          v-if="authorityList.includes(1900)"
      >新增
      </el-button>
    </div>
    <!--    表格-->
    <div>
      <el-table :data="storeManagerData"
                :row-style="{ height: '20px' }"
                height="calc(100vh - 300px)"
                overflow="auto"
                border
                stripe
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{
        backgroundColor: '#F3F6FD',
        color: '#333333',
        fontSize: '14px',
        textAlign: 'center',
      }">
        <el-table-column label="ID" prop="storeManagerId" width="60"></el-table-column>
        <el-table-column
            prop="storeManagerName"
            label="店长姓名"
        ></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column
            prop="phoneNum"
            label="联系方式"
        ></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-link
                style="color: #303e9d; margin-left: 10px"
                @click="_edit(scope.row)"
                v-if="authorityList.includes(1902)"
            >编辑
            </el-link>
            <el-link
                style="color: #303e9d; margin-left: 10px"
                @click="_delete(scope.row)"
                v-if="authorityList.includes(1903)"
            >删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div style="text-align: right; margin-top: 20px">
      <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>
    </div>
    <add_storeManageInfo
        ref="addStoreManageRef"
        :dialogTitle="dialogTitle"
        @addStatus="receiveMessage"
    ></add_storeManageInfo>
  </div>
</template>

<script>
import add_storeManageInfo from "./componentDialog/addStoreManagerInfo.vue";

export default {
  name: "storeManagerList.vue",
  meta: {
    title: '店长列表',
    icon: 'el-icon-s-custom',
    authorityList: 2000,
    sort: 3,
  },
  components: {
    add_storeManageInfo,
  },
  data() {
    return {
      brandList: [],
      params: {
        pageNum: 1,
        pageSize: 20,
        userName: "",
        phoneNum: "",
        brandPartyId: ""
      },
      dialogTitle: "",
      authorityList: [],
      storeManagerData: [
        {
          name: "猴子",
          sex: "未知",
          phone: "12123"
        }
      ],
      totalCount: 0
    }
  },
  created() {
    const {authorityList = []} =
    this.$quinn.getStorage('userDatav3') || this.$store.state.userData || {}
    this.authorityList = authorityList
    this.getBrand()
  },
  methods: {
    getBrand() {
      this.$api.storeGetBrandPartyList().then(res => {
        this.brandList = res
        this.params.brandPartyId = res[0].id
        this.getStoreManagerList()
      })
    },
    result() {
      this.params = this.$options.data.call(this).params
      this.getStoreManagerList()
    },
    _search() {
      this.params.pageNum = 1
      this.getStoreManagerList()
    },
    getStoreManagerList() {
      this.$api.storeManagerGetStoreManagerList(this.params).then(res => {
        this.storeManagerData = res.data
        this.totalCount = res.total
      })
    },
    receiveMessage(val) {
      if (val == 1) this.getStoreManagerList()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getStoreManagerList()
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getStoreManagerList()
    },
    addStoreManager() {
      this.dialogTitle = '录入店长'
      this.$refs.addStoreManageRef.handleOpen()
    },
    _edit(row) {
      this.dialogTitle = '编辑店长'
      this.$refs.addStoreManageRef.handleOpen(JSON.parse(JSON.stringify(row)))
    },
    _delete(row) {
      this.$confirm('确定要删除此条店长信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            this.$api
                .storeManagerDeleteFranchisee({sId: row.storeManagerId})
                .then((res) => {
                  this.$message.success('删除成功')
                  this.getStoreManagerList()
                })
          })
          .catch(() => {
          })
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/public.css';

/* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #303e9d;
} */
.search {
  margin: 0 10px 10px 0;
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

/deep/ .el-form-item__error {
  left: 80px;
}

/* /deep/ .el-table .el-table__cell {
  padding: 0 !important;
  height: 45px !important;
}

/deep/ .el-table .el-table__body tr.el-table__row--striped td {
  background: #f3f6fd !important;
} */
</style>
